import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    Typography,
    Divider,
    Box,
    Paper
} from '@mui/material';
import { Activity } from './types';

interface ActivityDetailDialogProps {
    open: boolean;
    onClose: () => void;
    activity: Activity | null;
    onEdit?: () => void;
}

const ActivityDetailDialog: React.FC<ActivityDetailDialogProps> = ({ open, onClose, activity }) => {
    if (!activity) {
        return null;
    }

    return (
        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
            <Paper elevation={0} sx={{ borderRadius: '8px' }}>
                <DialogTitle>
                    <Typography variant="h5" component="div" sx={{ fontWeight: 'bold', color: '#1976d2' }}>
                        活动详情
                    </Typography>
                </DialogTitle>
                <Divider />
                <DialogContent>
                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 1 }}>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                活动ID:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {activity.id}
                            </Typography>
                        </Box>

                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                活动时间:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {activity.date}
                            </Typography>
                        </Box>

                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                活动类型:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {activity.type}
                            </Typography>
                        </Box>

                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                活动名称:
                            </Typography>
                            <Typography variant="body1" sx={{ color: '#333' }}>
                                {activity.name}
                            </Typography>
                        </Box>

                        <Box sx={{ display: 'flex', alignItems: 'flex-start' }}>
                            <Typography variant="subtitle1" sx={{ fontWeight: 'bold', width: '120px', color: '#555' }}>
                                备注:
                            </Typography>
                            <Typography variant="body1" sx={{ whiteSpace: 'pre-wrap', color: '#333', flex: 1 }}>
                                {activity.remark || '无'}
                            </Typography>
                        </Box>
                    </Box>
                </DialogContent>
                <DialogActions sx={{ p: 2, display: 'flex', justifyContent: 'flex-end' }}>
                    <Button
                        onClick={onClose}
                        color="primary"
                        variant="contained"
                        sx={{
                            borderRadius: '4px',
                            px: 3
                        }}>
                        关闭
                    </Button>
                </DialogActions>
            </Paper>
        </Dialog>
    );
};

export default ActivityDetailDialog;
